<template>
	<div class="app-container">
	<el-row :gutter="32">
		<el-col :xs="24" :sm="24" :lg="9">
			<el-card class="box-card" style='height: 270px;'>
	        <div slot="header" class="clearfix">
	        	<span>基本信息</span>
	        </div>
	        <el-row>
	        	<el-col class='spanCol' :span='10'>MSISDN:1111111111</el-col>
	        	<el-col class='spanCol' :span='10'>ICCID:8888888888888</el-col>
	        	<el-col class='spanCol' :span='10'>IMSI:1111111111</el-col>
	        	<el-col class='spanCol' :span='10'>IMEI:8888888888888</el-col>
	        	<el-col class='spanCol' :span='10'>短信端口号:1111111111</el-col>
	        	<el-col class='spanCol' :span='10'>运营商:8888888888888</el-col>
	        	<el-col class='spanCol' :span='10'>网络类型:234G</el-col>
	        	<el-col class='spanCol' :span='10'>套餐:公网10M/月</el-col>
	        	<el-col class='spanCol' :span='10'>计费组代码:1DDDDD</el-col>
	        	<el-col class='spanCol' :span='10'>SIM卡类型:5*6贴片卡</el-col>
	        	<el-col class='spanCol' :span='10'>实名状态:状态查询失败</el-col>
	        </el-row>
	        </el-card>
		</el-col>
		<el-col :xs="24" :sm="24" :lg="10">
			<el-card class="box-card" style='height: 270px;'>
	        <div slot="header" class="clearfix">
	        	<span>计费周期</span>
	        </div>
	        <el-row>
	        	<el-col class='spanCol' :span='12'><span class="spanWidth">出库日期:</span><span class="spanWidth2">1111111111</span></el-col>
	        	<el-col class='spanCol' :span='12'><span class="spanWidth">测试期起始日期:</span><span class="spanWidth2">2019年12月03日</span></el-col>
	        	<el-col class='spanCol' :span='12'><span class="spanWidth">沉默期起始日期:</span><span class="spanWidth2">2019年12月03日</span></el-col>
	        	<el-col class='spanCol' :span='12'><span class="spanWidth">激活日期:</span><span class="spanWidth2">2019年12月03日</span></el-col>
	        	<el-col class='spanCol' :span='12'><span class="spanWidth">计费起始日期:</span><span class="spanWidth2">2019年12月03日</span></el-col>
	        	<el-col class='spanCol' :span='12'><span class="spanWidth">计费结束日期:</span><span class="spanWidth2">2019年12月03日</span></el-col>
	        	<el-col class='spanCol' :span='12'><span class="spanWidth">测试期流量:</span><span class="spanWidth2">0.00M</span></el-col>
	        </el-row>
	        </el-card>
		</el-col>
		<el-col :xs="24" :sm="24" :lg="5">
			<el-card class="box-card" style='height: 270px;'>
	        <div slot="header" class="clearfix">
	        	<span>功能信息</span>
	        </div>
	        <el-row>
	        	<el-col class='spanCol' :span='20'>短信功能:√</el-col>
	        	<el-col class='spanCol' :span='20'>卡状态:正使用</el-col>
	        	<el-col class='spanCol' :span='20'>语音功能:X</el-col>
	        </el-row>
	        </el-card>
		</el-col>
	</el-row>
	<el-card class="box-card" style='margin-top: 30px;'>
	        <div slot="header" class="clearfix">
	        	<span>状态信息</span>
	        </div>
	        <el-row>
	        	<el-col class='spanCol' :span='6'>开关机状态:未知</el-col>
	        	<el-col class='spanCol' :span='6'>工作状态:未知</el-col>
	        	<el-col class='spanCol' :span='10'>状态说明:阿三和大神解答</el-col>
	        	<el-col class='spanCol' :span='6'>当月流量(MB):0.00</el-col>
	        	<el-col class='spanCol' :span='6'>剩余流量(MB):10.00</el-col>
	        </el-row>
	 </el-card>
	 <el-row :gutter="32" style='margin-top: 30px;'>
	 	<el-col :span='12'>
	 		<el-card class="box-card">
	        <div slot="header" class="clearfix">
	        	<span>流量统计-日流量</span>
	        </div>
	        <line-chart :chart-data="lineChartData" />
	        </el-card>
	 	</el-col>
	 	<el-col :span='12'>
	 		<el-card class="box-card">
	        <div slot="header" class="clearfix">
	        	<span>流量统计-月流量</span>
	        </div>
	        <line-chart :chart-data="lineChartData" />
	        </el-card>
	 	</el-col>
	 </el-row>
	 <el-card class="box-card" style='margin-top: 30px;'>
        <div slot="header" class="clearfix">
        	<span>充值记录</span>
        </div>
	  <el-table v-loading="loading" :data="postList">
      <el-table-column label="订单号" align="center" prop="postId" />
      <el-table-column label="外部订单号" align="center" prop="postCode" />
      <el-table-column label="套餐" align="center" prop="postName" />
      <el-table-column label="充值方式" align="center" prop="postSort" />
      <el-table-column label="充值价格(元)" align="center" prop="createTime"  />
      <el-table-column label="充值月数" align="center" prop="createTime"  />
      <el-table-column label="充值流量(MB)" align="center" prop="createTime"  />
      <el-table-column label="计费延长" align="center" prop="createTime"  />
      <el-table-column label="创建时间" align="center" prop="createTime"  />
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
	 <el-row>
	 	<el-button type="primary">充值</el-button>
	 </el-row>    
	 </el-card>
	</div>
</template>

<script>
	import LineChart from './../../dashboard/LineChart'
	import { listPost} from "@/api/system/post";
	export default{
		data(){
			return{
				// 遮罩层
     			loading: true,
				 // 总条数
      			total: 0,
			
				postList:[],
				// 查询参数
		        queryParams: {
		        pageNum: 1,
		        pageSize: 10,
		      },
		      lineChartData:{
			    expectedData: [100, 120, 161, 134, 105, 160, 165],
			  }
			}
		},
		created(){
			this.getList()
		},
		components:{
			LineChart
		},
		methods:{
			/** 查询岗位列表 */
		    getList() {
		      this.loading = true;
		      listPost(this.queryParams).then(response => {
		      	console.log(response);
		        this.postList = response.rows;
		        this.total = response.total;
		        this.loading = false;
		      });
		    },
		}
	}
</script>

<style scoped="scoped">
	.spanCol{
		font-size: 14px;
		padding: 8px;
		color: #606266;
	}
	.spanWidth{
		display: inline-block;
		width: 110px;
	}
	.spanWidth2{
		display: inline-block;
		width: 105px;
	}
</style>